<template>
  <div class="demo-page">
    <!-- 触发按钮 -->
    <button @click="showPicker = true" class="trigger-btn">
      打开身高体重选择器<br />身高：{{height||'--'}}，体重：{{weight||'--'}}
    </button>

    <!-- 身高体重选择器（与日期选择器API一致） -->
    <HeightWeightPicker
      :visible="showPicker"
      :initial-height="175"
      :initial-weight="65"
      :min-height="100"
      :max-height="220"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      @heightChange="handleHeightChange"
      @weightChange="handleWeightChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 引入组件
import HeightWeightPicker from '../../components/HeightWeightPicker/HeightWeightPicker.vue'

// 控制显示/隐藏
const showPicker = ref(false)
const height = ref()
const weight = ref()
// 确认选择
const handleConfirm = (value: { height: number; weight: number; heightUnit: string; weightUnit: string }) => {
  console.log('最终选择：', value) // 输出：{ height: 175, weight: 65, heightUnit: 'CM', weightUnit: 'KG' }
  
  height.value = value.height
  weight.value = value.weight
  showPicker.value = false
}

// 取消选择
const handleCancel = () => {
  showPicker.value = false
}

// 实时监听身高变化
const handleHeightChange = (height: number) => {
  console.log('实时身高：', height)
}

// 实时监听体重变化
const handleWeightChange = (weight: number) => {
  console.log('实时体重：', weight)
}
</script>

<style scoped>
.demo-page {
  padding: 50px;
  text-align: center;
}

.trigger-btn {
  padding: 10px 20px;
  border: 1px solid #00897B;
  border-radius: 4px;
  background: #fff;
  color: #00897B;
  font-size: 16px;
  cursor: pointer;
}
</style>